import React, { useState } from 'react';
import { Button, Radio } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { If } from 'babel-plugin-jsx-control-statements';
import { useHistory } from 'react-router-dom';
import qs from 'qs';
import ProcessRecord from '@/components/process-record';
import SiteSurvey from '@/components/site-survey';
import Collapse from '@/components/collapse';
import UserInfo from '@/components/admin-audit/userInfo';
import ParkingLotInfo from '@/components/admin-audit/parkingLotInfo';
import ParkingLotExtraInfo from '@/components/admin-audit/parkingLotExtraInfo';
import FileExtraInfo from '@/components/admin-audit/fileExtraInfo';
import Advice from '@/components/pending-advice';
import css from './index.scss';

const BaseMsg = () => {
	return (
		<>
			<Collapse
				form1={<UserInfo />}
				form2={<ParkingLotInfo />}
				form3={<ParkingLotExtraInfo />}
				form4={<FileExtraInfo />}
			/>
			<Advice />
		</>
	);
};
const Process = () => {
	return <ProcessRecord />;
};
const Survey = () => {
	return <SiteSurvey />;
};
/**
 * @description 管理员审核
 */
export default () => {
	const history = useHistory();
	const search = qs.parse(history.location.search, { ignoreQueryPrefix: true });
	const { value, name } = search;
	const [values, setValues] = useState(value);
	const handleModeChange = (e) => {
		setValues(e.target.values);
	};
	const back = () => {
		history.goBack(-1);
	};
	return (
		<div className={css.app}>
			<h1>
				<Button type="link" style={{ color: 'black' }} onClick={back}>
					<ArrowLeftOutlined />
				</Button>
				{`区停车办${name}`}
			</h1>
			<div className={css.header}>
				<Radio.Group onChange={handleModeChange} value={value} style={{ marginBottom: 8 }}>
					<Radio.Button values="1">基本信息</Radio.Button>
					<Radio.Button values="2">流程覆历</Radio.Button>
					<If condition={name === '现场勘查'}>
						<Radio.Button values="3">现场勘查</Radio.Button>
					</If>
				</Radio.Group>
			</div>
			<div className={css.content}>
				<If condition={values === '1'}>
					<BaseMsg />
				</If>
				<If condition={values === '2'}>
					<Process />
				</If>
				<If condition={name === '现场勘查'}>
					<Survey />
				</If>
			</div>
		</div>
	);
};
